<template>
  <yt-page title="执法文书统计" scroll :rightData="rightData">
    <yt-card title="概览">
      <yt-cell v-for="(item, index) in DOCUMENTS" :key="index" :label="item.text" labelWidth="200px" :value="`共计 ${total[item.code] || 0} 条记录`">
        <div slot="label" class="flex">
          <div class="lengent" :style="getBgC(index)"></div>
          <span>{{item.text}}</span>
        </div>
      </yt-cell>
    </yt-card>
    <yt-card title="执法文书统计数据">
      <div class="chart" ref="chart" style="width: 100%; height: 400px"></div>
    </yt-card>
    <yt-popup pos="right" v-model="search" :mask="true" slot="alert">
      <yt-page class="page" :flex="true" :leftData="[]" title="企业列表">
        <yt-form style="background-color: #fff">
          <yt-radioList class="list" :list="entList" label="EnterpriseName" val="id" v-model="selected" :inline="false">
          </yt-radioList>
          <yt-btn-group slot="btn" :shadow="false">
            <yt-btn theme="white" @click="search = false">关闭</yt-btn>
            <yt-btn @click="onSearch(selected)">确定</yt-btn>
          </yt-btn-group>
        </yt-form>
      </yt-page>
    </yt-popup>
  </yt-page>
</template>

<script>
import gql from './law-doc.gql'
import { commonApi } from '@/common/api/commonApi.js'
import _ from 'lodash'
import echarts from 'echarts/lib/echarts'
import 'echarts/theme/macarons'
import 'echarts/lib/chart/line'

const COLORS = ['#3d74f1', '#fe413b', '#7a86ff', '#fab63f', '#55acee', '#4c70ba']
const DOCUMENTS = [
  {
    code: 'D0001',
    text: '现场检查方案'
  },
  {
    code: 'D0002',
    text: '现场检查文书'
  },
  {
    code: 'D0003',
    text: '责令限期整改指令书'
  },
  {
    code: 'D0004',
    text: '整改复查意见书'
  },
  {
    code: 'D0005',
    text: '现场处理措施决定书'
  },
  {
    code: 'D0006',
    text: '查封扣押决定书'
  }
]
const MONTHS = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

export default {
  data () {
    return {
      DOCUMENTS,
      COLORS,
      search: false,
      selected: [],
      entList: [],
      rightData: [{
        font: 'yt-icon yt-icon-search',
        click: () => {
          this.search = !this.search
        }
      }],
      total: {},
      chartObj: {},
      chartOption: {
        color: COLORS,
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          show: false,
          data: [],
          align: 'right'
        },
        grid: {
          right: '12%'
        },
        xAxis: [
          {
            name: '月份',
            nameLocation: 'end',
            boundaryGap: false, // 坐标轴两端空白策略
            type: 'category',
            data: MONTHS,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            name: '隐患/个数',
            type: 'value'
          }
        ],
        series: []
      }
    }
  },
  computed: {
      currentTotal() {
        if (this.total['1'] === 'N/A' || this.total['2'] === 'N/A') {
          return 'N/A'
        }
        let total = this.total['1'] + this.total['2']
        return isNaN(total) ? 0 : total
      }
    },
    methods: {
      getDocumentName(code) {
        let obj = DOCUMENTS.find(v => v.code === code)
        return obj ? obj.text : ''
      },
      renderTotal(record) {
        record = _.zipObject(record.keys, record.values)
        this.total = record
      },
      renderCard(month) {
        let obj = _.zipObject(month.keys, month.values)
        let series = DOCUMENTS.map((item) => {
          let data = []
          let val = obj[item.code]
          if (val) data = MONTHS.map((v, index) => val[index + 1] || 0)
          return {
            name: item.text,
            type: 'bar',
            data: data
          }
        })
        this.chartOption.series = series
        this.chartObj.setOption(this.chartOption)
      },
      async onSearch(id) {
        this.search = false
        this.currentId = id
        let { record, month } = await commonApi.gql(gql, {
          'qjson': id ? { equalTo: ['ent_id', id] } : {}
        })
        this.renderTotal(record)
        this.renderCard(month)
      },
      async onInit() {
        this.entList = await commonApi.search('ent_enterprise')
        this.chartOption.legend.data = DOCUMENTS.map(item => item.text)
        this.onSearch()
      },
      getBgC (idx) {
        return `background-color:${COLORS[idx]}`
      }
    },
    activated() {
      this.chartObj = echarts.init(this.$refs.chart, 'macarons')
      this.onInit()
    }
}
</script>

<style lang="stylus" scoped>
.lengent
    display inline-block
    width 20px
    height 20px
    border-radius 50%
    margin-right 10px
</style>
